<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>发布通知</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<form class="layui-form layui-form-pane layui-margin-3 layui-anim layui-anim-upbit" id="myForm">
    <div class="layui-form-item">
        <label class="layui-form-label">通知类型</label>
        <div class="layui-input-block">
            <select name="type" id="type">
                <option value="1" selected>普通通知</option>
                <option value="2">维护通知</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通知标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">接收用户</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-skin="tag" name="receiver" th:each="identity : ${identityList}" th:value="${identity.id}" th:title="${identity.name}">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">通知内容</label>
        <div class="layui-input-block">
            <textarea name="content" class="layui-textarea" rows="25" maxlength="1000" lay-verify="required"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即发布</button>&nbsp;
            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="demo2">暂且保存</button>
        </div>
    </div>
</form>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'util', 'jquery'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        function myRequest(field, status) {
            // 获取复选框的选中内容，并将其值用,拼接
            const checkboxes = document.querySelectorAll('input[name="receiver"]:checked');
            const selectedNumbers = [];
            let receiver;
            checkboxes.forEach((checkbox) => {
                selectedNumbers.push(checkbox.value);
            });
            if (selectedNumbers.length > 0) {
                receiver = selectedNumbers.join(',');
            } else {
                layer.msg('请选择接收通知的用户类型');
                return false; // 阻止默认 form 跳转
            }

            $.ajax({
                url: '/doNoticeAdd',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    "type": field.type,
                    "title": field.title,
                    "content": field.content,
                    "receiver": receiver,
                    "status": status
                }),
                success: function (res) {
                    if (res.code === 1) {
                        layer.msg('保存成功！', {icon: 1});
                        setTimeout(() => {
                            location.reload();  // 尝试从缓存中加载页面
                        }, 2000);
                    } else if (res.code === 2) {
                        layer.msg('发布成功！', {icon: 1});
                        setTimeout(() => {
                            location.reload();  // 尝试从缓存中加载页面
                        }, 2000);
                    } else {
                        layer.msg('操作失败！', {icon: 2});
                    }
                },
                error: function () {
                    layer.msg('Ajax请求异常！', {icon: 0});
                }
            });
        }

        // 提交事件
        form.on('submit(demo1)', function (data) {
            myRequest(data.field, 2);
            return false; // 阻止默认 form 跳转
        });

        form.on('submit(demo2)', function (data) {
            myRequest(data.field, 1);
            return false; // 阻止默认 form 跳转
        });

    });
</script>

</body>
</html>